<template>
  <van-popup
    v-model:show="show"
    close-icon-position="top-right"
    position="bottom"
    :style="{ height: '30%' }"
  >
    <div class="box">
      <div class="default" @click="settingsDefaultSealClick">设为默认</div>
      <div class="delete" @click="deleteSealClick">确定删除</div>
      <div class="end" @click="show = false">取消</div>
    </div>
  </van-popup>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { postSettingsDefaultSeal, postRemoveSeal } from '@/api/contract'
import { Form } from 'vant'
export default defineComponent({
  emits: ['reload'],
  setup(props, { emit }) {
    const show = ref(false)
    const sealData = reactive({
      id: '',
      sealType: ''
    })
    // 显示
    const showPopup = (id: string, type: string) => {
      sealData.id = id
      sealData.sealType = type
      show.value = true
    }
    // 设置默认
    const settingsDefaultSealClick = async () => {
      const formData = new FormData()
      formData.append('id', sealData.id)
      formData.append('sealType', sealData.sealType)
      const res = await postSettingsDefaultSeal(formData)
      if (res.code !== '0') return
      show.value = false
      emit('reload')
    }

    // 删除
    const deleteSealClick = async () => {
      const formData = new FormData()
      formData.append('id', sealData.id)
      formData.append('sealType', sealData.sealType)
      const res = await postRemoveSeal(formData)
      if (res.code !== '0') return
      show.value = false
      emit('reload')
    }
    return { show, showPopup, settingsDefaultSealClick, deleteSealClick }
  }
})
</script>

<style scoped lang="less">
.box {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: #f8f8f8;
  .default {
    height: 55px;
    line-height: 55px;
    border-bottom: 1px solid #e4e4e4;
    background-color: #fff;
    text-align: center;
    color: #101010;
    font-size: 16px;
  }
  .default:active {
    background-color: #f2f3f5;
  }
  .delete {
    height: 55px;
    line-height: 55px;
    background-color: #fff;
    text-align: center;
    color: red;
    font-size: 16px;
  }
  .delete:active {
    background-color: #f2f3f5;
  }
  .end {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 55px;
    background-color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 55px;
  }
  .end:active {
    background-color: #f2f3f5;
  }
}
</style>
